<template>
  <div class="home-search">
    <div class="location-box bottom-gray-line">
      <div class="city" @click="cityClick">无锡</div>
      <div class="location" @click="getLocation">
        <span class="text">我的位置</span>
        <img src="@/assets/img/home/icon_location.png" alt="">
      </div>
    </div>
    <div class="section date-box bottom-gray-line" @click="showCalendar = true">
      <div class="start">
        <div class="info">入住</div>
        <div class="date">{{ formateMonthDay(datePicker.startDate) }}</div>
      </div>
      <div class="stay">共{{ diffDay }}晚</div>
      <div class="end">
        <div class="info">离店</div>
        <div class="date">{{ formateMonthDay(datePicker.endDate) }}</div>
      </div>
    </div>
    <div class="section bottom-gray-line">
      <div class="start">价格不限</div>
      <div class="end">人数不限</div>
    </div>
    <div class="section bottom-gray-line">
      <div class="start">关键字/位置/民宿名</div>
    </div>
    <div class="suggest-tags">
      <div class="tag" v-for="tag in hotSuggests" :key="tag.tagText.text"
        :style="{ color: tag.tagText.color, backgroundColor: tag.tagText.background.color }">{{ tag.tagText.text }}
      </div>
    </div>
    <div class="search">
      <van-button type="primary" size="large" round>开始搜索</van-button>
    </div>
    <van-calendar v-model:show="showCalendar" type="range" color="#ff9854" :round="false" :formatter="formatter"
      @confirm="onConfirm" />


  </div>
</template>
<script setup>
import useHomeStore from '@/stores/modules/home';
import { formateMonthDay, getDay, getDiffDay } from '@/utils';
import { storeToRefs } from 'pinia';
import { computed, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const showCalendar = ref(false); // 日历显示隐藏
const formatter = (day) => {
  if (day.type === 'start') {
    day.bottomInfo = '入住';
  } else if (day.type === 'end') {
    day.bottomInfo = '离店';
  }
  return day;
}
// 初始化日期
const datePicker = reactive({
  startDate: new Date(),
  endDate: getDay(new Date(), 1),
})
const diffDay = computed(() => {
  return getDiffDay(datePicker.startDate, datePicker.endDate)
})
const onConfirm = (value) => {
  datePicker.startDate = value[0]
  datePicker.endDate = value[1]

  // 2.隐藏日历
  showCalendar.value = false
}
const homeStore = useHomeStore()
const { hotSuggests } = storeToRefs(homeStore)
// 热门搜索
homeStore.fetchHotSuggestsAction();


// 获取经纬度
const getLocation = () => {
  navigator.geolocation.getCurrentPosition(res => {
    console.log("获取位置成功:", res)
  }, err => {
    console.log("获取位置失败:", err)
  }, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  })
}

/******************************路由************************************** */
const router = useRouter();

// 点击跳转城市选择
const cityClick = () => {
  router.push('/city')
}


</script>
<style lang="less" scoped>
.home-search {
  --van-calendar-popup-height: 100%;
  box-sizing: border-box;
}

.location-box {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 50px;

  .city {
    flex: 1;
    color: #333;
    font-size: 15px;
  }

  .location {
    width: 74px;
    display: flex;
    justify-content: end;
    align-items: center;
    color: #666;
    font-size: 12px;

    img {
      width: 18px;
      margin-left: 5px;
    }
  }
}

.section {
  display: flex;
  padding: 0 20px;
  height: 50px;
  font-size: 14px;
  align-items: center;
  color: #999;

  .start,
  .stay {
    flex: 1;
  }

  .date {
    color: #333;
  }

  .stay {
    color: #666;
  }

  .end {
    width: 30%;
  }

  .info {
    font-size: 12px;
    color: #666;
    margin-bottom: 3px;
  }
}

.suggest-tags {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;

  .tag {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    margin: 3px 5px 7px 0;
    line-height: 1.2;
  }
}

.search {
  padding: 0 20px;
  box-sizing: border-box;
  --van-button-large-height: 40px;
}
</style>
